import React, { Component } from "react";

/**
 * 添加、修改用户的Form组件
 */
import { Form, Input, Select } from 'antd'
import PropTypes from 'prop-types'
/**
 * 添加分类的form组件
 */
const Item = Form.Item;
const Option = Select.Option

export default class UserForm extends Component {
    static propTypes = {
        setForm: PropTypes.func.isRequired, // 用来传递form对象的函数
        roles: PropTypes.array.isRequired,
        user: PropTypes.object
    }

    onFinish = (values) => {
        console.log('Received values from form: ', values);
    };

    render() {
        const { roles,user } = this.props
        // 指定Item布局的配置对象
        const formItemLayout = {
            labelCol: { span: 4 },  // 左侧label的宽度
            wrapperCol: { span: 15 }, // 右侧包裹的宽度
        }
        return (
            <Form ref="form" {...formItemLayout} initialValues={{
                'username': user.username,
                'password': user.password,
                'phone': user.phone,
                'email': user.email,
                'role_id': user.role_id,
              }}>
                <Item name="username" label='用户名' rules={[{ required: true, message: '请输入用户名' }]}>
                    <Input placeholder="请输入用户名"></Input>
                </Item>
                <Item name="password" label='密码' rules={[{ required: true, message: '请输入密码' }]}>
                    <Input type="password" placeholder="请输入密码"></Input>
                </Item>
                <Item name="phone" label='手机号' rules={[{ required: true, message: '请输入手机号' }]}>
                    <Input placeholder="请输入手机号"></Input>
                </Item>
                <Item name="email" label='邮箱' rules={[{ required: true, message: '请输入邮箱' }]}>
                    <Input placeholder="请输入邮箱"></Input>
                </Item>
                <Item name="role_id" label='角色' rules={[{ required: true, message: '请选择角色' }]}>
                    <Select >
                        {
                            roles.map(role => <Option key={role._id} value={role._id}>{role.name}</Option>)
                        }
                    </Select>
                </Item>

            </Form>
        )
    }

}